<template>
  <div class="bg-white shadow rounded-lg p-6" v-if="items">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-xl font-bold">{{ title }}</h2>
      <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700" @click="$emit('add')">
        添加
      </button>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th v-for="col in columns" :key="col.key"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              {{ col.label }}
            </th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr v-for="item in items" :key="item.id">
            <td v-for="col in columns" :key="col.key" class="px-6 py-4 whitespace-nowrap">
              <FormField :type="col.type" v-model="item[col.key]" :options="col.options" class="w-full" />
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              <button class="text-red-600 hover:text-red-900" @click="$emit('delete', item.id)">
                删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: String,
  items: Array,
  columns: Array
})

defineEmits(['add', 'delete'])
</script>